<template>
  <div>
      <div class="pineg">
           <div class="topharder">
              <div class="tg">
                <van-nav-bar title="确认订单"  left-arrow @click-left="onClickLeft">
                </van-nav-bar>
              </div>
          </div>
            <!-- 地址 -->
          <div class="addressgoto">
                <div class="addrename">
                      <div class="left">
                          <div class="getinto">
                              <span class="iconfont icon-dizhidingwei"></span>
                          </div>
                          <div class="trrt">
                               <div class="nameto">
                                    <span class="name">{{addrestli.name}}</span><span class="phone">{{addrestli.tel}}</span>
                                </div>
                                <div class="addrs">
                                    <span>{{addrestli.address}}</span>
                                </div>
                          </div>
                      </div>
                      <div class="right" @click.stop="$router.push('/adderss')">
                          <span class="iconfont icon-right-1-copy"></span>
                      </div>
                </div>
           </div>
           <div class="liat">
                 <div class="cardlists">
                     <div class="kca" v-for="(item) in shopinglist" :key="item.goodsId">
                         <div class="van-card" >
                             <div class="van-card__thumb">
                                 <div class="van-image" style="width: 100%; height: 100%;">
                                 <img :src="item.goodsId_img" class="van-image__img" style="object-fit: cover;">
                                 </div>
                             </div>
                             <div class="van-card__content">
                                 <div>
                                     <div class="van-card__title van-multi-ellipsis-tan">{{item.name}}</div>
                                     <div class="van-card__desc van-ellipsis">{{item.title}}</div>
                                 </div>
                                 <div class="buoto">
                                     <div class="van-card__bottom">
                                         <div class="van-card__price">
                                             <div>
                                                 <span class="van-card__price-currency">¥</span>
                                                 <span class="van-card__price-integer">{{item.price}}</span>
                                             </div>
                                         </div>
                                     </div>
                                     <div class="muns">
                                         <div class="item mun">
                                             <span>x{{item.num}}</span>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div> 
                 </div>
           </div>
           <div class="bottom">
               <van-submit-bar :price="pricetotal" button-text="支付" @submit="onSubmit" />
           </div>
      </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { NavBar,SubmitBar,Card,Search,Dialog } from 'vant';
// import { template} from 'vant'; Vue.use(template);
Vue.use(Dialog);
Vue.use(NavBar);
Vue.use(SubmitBar);
Vue.use(Card);
Vue.use(Search);
import { Button ,checkbox,tag,icon } from 'vant';
Vue.use(Button).use(checkbox).use(tag).use(icon);
export default {
    data(){
        return{
             shopinglist:[
                // {
                //     name:"吧唧饭馆 颗粒花生酱",
                //     id:12,
                //     tilie:"吧唧饭馆 颗粒花生酱 0糖0添加高蛋白200g*2瓶装（海盐颗粒+原味颗粒）",
                //     biao:"",
                //     num:3,
                //     price:30.03,
                //     checked:false,
                //     url:'https://cp1.douguo.com/upload/tuan/6/2/e/448_62d58703c7177fd3d8ae518bd843b34e.jpg'
                // },
                // {
                //     name:"吧唧饭馆 颗粒花生酱",
                //     id:13,
                //     tilie:"吧唧饭馆 颗粒花生酱 0糖0添加高蛋白200g*2瓶装（海盐颗粒+原味颗粒）",
                //     biao:"",
                //     num:3,
                //     price:30,
                //     checked:false,
                //     url:'https://cp1.douguo.com/upload/tuan/6/2/e/448_62d58703c7177fd3d8ae518bd843b34e.jpg'
                // },
                // {
                //     name:"吧唧饭馆 颗粒花生酱",
                //     id:14,
                //     tilie:"吧唧饭馆 颗粒花生酱 0糖0添加高蛋白200g*2瓶装（海盐颗粒+原味颗粒）",
                //     biao:"",
                //     num:3,
                //     price:30,
                //     checked:false,
                //     url:'https://cp1.douguo.com/upload/tuan/6/2/e/448_62d58703c7177fd3d8ae518bd843b34e.jpg'
                // }
            ],
            show:false,
            addrestli:{
                name:"张三",
                tel:17677451729,
                address:"广东省广州市00区00街道00号",
                id:6
            },
            numberto:null
        }
    },
    methods:{
        gettransaction(){
        
                let numberto = [];
                for(var i = 0 ; i<9;i++){
                     let num = Math.floor(Math.random() * 9 + 1);
                     numberto.push(num);
                }
                // console.log(numberto.join(""));
                this.numberto=numberto.join("")
            // let transaction_code =2367102602;
        },
        onSubmit(){
            console.log("123")
            // Dialog({ message: '提示' });
                Dialog.confirm({
                    // title: '确认付款',
                    message: "确认付款",
                })
                .then(() => {
                    let orderlist = JSON.parse(sessionStorage.getItem('orderlist'));
                    if(orderlist){
                        this.shopinglist.forEach(ele=>{
                            this.gettransaction();
                            let transaction_code ='2367102602'+this.numberto;
                            let {name,goodsId_img,goodsId,sto,price,num,checked,title} =ele
                            let data = {
                                        name:name,
                                        goodsId_img:goodsId_img,
                                        title:title,
                                        goodsId:goodsId,
                                        sto:sto,
                                        price:price,
                                        num:num,
                                        checked:checked,
                                        type:2,
                                        transaction_code:transaction_code,
                                        addrestli:this.addrestli
                                };
                                // console.log(data)
                            orderlist.push(data)
                        });
                        window.sessionStorage.setItem('orderlist',JSON.stringify(orderlist));//存数据
                        console.log(orderlist)
                    }else{
                        let orderlisto= [];
                        this.shopinglist.forEach(ele=>{
                            this.gettransaction();
                            let transaction_code ='2367102602'+this.numberto;
                            let {name,goodsId_img,goodsId,sto,price,num,checked,title} =ele
                            let data = {
                                        name:name,
                                        goodsId_img:goodsId_img,
                                        title:title,
                                        goodsId:goodsId,
                                        sto:sto,
                                        price:price,
                                        num:num,
                                        checked:checked,
                                        type:2,
                                        transaction_code:transaction_code,
                                        addrestli:this.addrestli
                                };
                                // console.log(data)
                            orderlisto.push(data)
                        });

                        window.sessionStorage.setItem('orderlist',JSON.stringify(orderlisto));//存数据
                        // console.log(orderlist)
                    }
                    let arrto = [] ;
                    window.sessionStorage.setItem('userArr',JSON.stringify(arrto));//存数据
                    let onBuyphyto="";
                    window.sessionStorage.setItem('onBuyphy',JSON.stringify(onBuyphyto));//存数据  
                    this.$router.push('/pinglisto')
                })
                .catch(() => {
                    
                    let orderlist = JSON.parse(sessionStorage.getItem('orderlist'));//取数据
                    if(orderlist){
                        this.shopinglist.forEach(ele=>{
                            this.gettransaction();
                            let transaction_code ='2367102602'+this.numberto;
                            let {name,goodsId_img,goodsId,sto,price,num,checked,title} =ele
                            let data = {
                                        name:name,
                                        goodsId_img:goodsId_img,
                                        title:title,
                                        goodsId:goodsId,
                                        sto:sto,
                                        price:price,
                                        num:num,
                                        checked:checked,
                                        type:1,
                                        transaction_code:transaction_code,
                                        addrestli:this.addrestli
                                };
                                // console.log(data)
                            orderlist.push(data)
                        });

                        window.sessionStorage.setItem('orderlist',JSON.stringify(orderlist));//存数据
                    }else{
                        let orderlisto= [];
                        this.shopinglist.forEach(ele=>{
                            this.gettransaction();
                            let transaction_code ='2367102602'+this.numberto;
                            let {name,goodsId_img,goodsId,sto,price,num,checked,title} =ele
                            let data = {
                                        name:name,
                                        goodsId_img:goodsId_img,
                                        title:title,
                                        goodsId:goodsId,
                                        sto:sto,
                                        price:price,
                                        num:num,
                                        checked:checked,
                                        type:1,
                                        transaction_code:transaction_code,
                                        addrestli:this.addrestli
                                };
                                // console.log(data)
                            orderlisto.push(data)
                        });

                        window.sessionStorage.setItem('orderlist',JSON.stringify(orderlisto));//存数据
                    }
                    let arrto = [] ;
                    window.sessionStorage.setItem('userArr',JSON.stringify(arrto));//存数据
                    let onBuyphyto="";
                    window.sessionStorage.setItem('onBuyphy',JSON.stringify(onBuyphyto));//存数据  
                    this.$router.push('/pinglisto')
                });
        },
        onClickLeft(){
            // console.log("123")
            // this.$router.go(-1)
            // let shpinglist = JSON.parse(sessionStorage.getItem('shpinglist'));//取数据
            // if(shpinglist){
            //     this.shopinglist.forEach(ele=>{
            //         let data = ele;
            //         shpinglist.push(data);
            //         window.sessionStorage.setItem('shpinglist',JSON.stringify(shpinglist));//存数据
            //     })
            // }else{
            //     let shpinglistpl = [];
            //     this.shopinglist.forEach(ele=>{
            //         let data = ele;
            //         shpinglistpl.push(data);
            //         window.sessionStorage.setItem('shpinglist',JSON.stringify(shpinglistpl));//存数据
            //     })
            // }
            this.$router.push('/cardgoto')
            
        },
        getgotopay(){
            let userArr = JSON.parse(sessionStorage.getItem('userArr'));//取数据
            // console.log(userArr);
            // 
            if(userArr !=''){
                userArr.forEach(ele=>{
                    let {name,goodsId_img,goodsId,sto,price,num,checked,title} =ele
                    let data = {
                                name:name,
                                goodsId_img:goodsId_img,
                                title:title,
                                goodsId:goodsId,
                                sto:sto,
                                price:price,
                                num:num,
                                checked:checked,
                                
                        };
                    this.shopinglist.push(data);
                   
                });
            }
            this.getaddto()
            
        },
        getaddto(){
            let addressto = JSON.parse(sessionStorage.getItem('addressto'));//取数据
            // console.log(addressto);
            if(addressto){
                // console.log("qwe")
                this.addrestli=addressto;
            }
        }
        
    },
    created(){
        this.getgotopay();
    },
    computed:{
        pricetotal:function(){
            return this.shopinglist.reduce((pricetotal,item)=>{
                
                return pricetotal += (item.price * item.num)*100;
                
            },0)
        },
      
    },
    components: {
    [Dialog.Component.name]: Dialog.Component,
   },
}
</script>

<style lang="less">
.pineg{
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 30px;
    .liat{
        width: 100%;
    }
    .topharder{
        .van-nav-bar__content{
            .van-nav-bar__left{
              i{
                 color: #323233;
              }
            }
        }
    }
    
}
    .addressgoto{
        width: 100%;
        margin-top: 10px;
        height: 60px;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
        .addrename{
            width: 100%;
            height: 100%;
            border-radius: 8px;
            background-color: #fafafa;
            padding: 6px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            .left{
                font-size: 14px;
                width: 85%;
                display: flex;
                .getinto{
                    width: 15%;
                    height: 100%;
                    text-align: center;
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                    span{
                        &.iconfont{
                            font-size: 26px;
                        }
                    }
                }
                .trrt{
                    width: 85%;
                    height: 100%;
                    font-size: 14px;
                    .nameto{
                        width: 100%;
                        height: 50%;
                        display: flex;
                        align-items:center;
                        overflow: hidden;
                        span{
                            &.name{
                                margin-right: 15px;
                                font-size: 16px;
                                font-weight: 600;
                            }
                            &.phone{
                                font-size: 14px;
                            }
                        }
                    }
                    .addrs{
                        width: 100%;
                        height: 50%;
                        display: flex;
                        overflow: hidden;
                        align-items:center;
                    }
                }
              
            }
            .right{
               
                display: flex;
                align-items: center;
                span{
                    &.iconfont{
                         font-size: 20px;
                    }
                }
            }
        }
    }
    
     
    .cardlists{
            width: 100%;
            margin-top: 10px;    
            .kca{
                width: 100%;
                margin-top: 10px;
                padding-left: 10px;
                padding-right: 10px;
                box-sizing: border-box;
                position: relative;
                .van-card {
                    width: 100%;
                    display: flex;
                    position: relative;
                    box-sizing: border-box;
                    padding: 8px 16px;
                    border-radius: 8px;
                    color: #323233;
                    font-size: 16px;
                    background-color: #fafafa;
                    align-items: center;
                    .boxtogo{
                        width: 10%;
                        height: 100%;
                        display: flex;
                    }
                   
                }
                .botput{
                    width: 10%;
                    right: 2px;
                    top: 3px;
                    position: absolute;
                    height: 30px;
                    span{
                        &.iconfont{
                            font-size: 20px;
                        }
                    }
                }
                .van-card__thumb{
                    position: relative;
                    -webkit-box-flex: 0;
                    -webkit-flex: none;
                    flex: none;
                    width: 95px;
                    height: 95px;
                    margin-right: 8px;
                }
                .van-card__conten{
                    position: relative;
                    display: -webkit-box;
                    display: -webkit-flex;
                    display: flex;
                    -webkit-box-flex: 1;
                    -webkit-flex: 1;
                    flex: 1;
                    -webkit-box-orient: vertical;
                    -webkit-box-direction: normal;
                    -webkit-flex-direction: column;
                    flex-direction: column;
                    -webkit-box-pack: justify;
                    -webkit-justify-content: space-between;
                    justify-content: space-between;
                    min-width: 0;
                    min-height: 95px;
                    
                }
                .van-card__title {
                    max-height: 32px;
                    width: 90%;
                    overflow: hidden;
                    font-weight: 500;
                    line-height: 16px;
                }
                .cardtosd .cardlists .kca .van-card__title {
                    max-height: 32px;
                    font-weight: 500;
                    line-height: 16px;
                }
                .van-multi-ellipsis-tan{
                    display: -webkit-box;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
                .van-card__desc {
                    max-height: 20px;
                    color: #646566;
                    line-height: 20px;
                }
                .van-ellipsis {
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
                .buoto{
                    width: 100%;
                    height: 25px;
                    display: flex;
                    justify-content:space-between;
                    .van-card__bottom {
                        line-height: 20px;
                        .van-card__price {
                            display: inline-block;
                            // color: #323233;
                            font-weight: 500;
                            font-size: 14px;
                            color: red;
                            .van-card__price-integer{
                                font-size: 16px;
                            }
                        }
                    }
                    .muns{
                        width: 20%;
                        height: 100%;
                        overflow: hidden;
                        display: flex;
                        justify-content: flex-end;
                        .item{
                            width:100% ;
                            height: 20px;
                            padding-left: 5px;
                            padding-right: 5px;
                            text-align: center;
                            line-height: 20px;
                        }
                        .mun{
                            width:100%;
                        }
                        
                    }
                }
            }
     }
</style>